<template>
  <div class="index">
    <el-container class="p-relative">
      <el-header>
        <div class="logo">校淘淘后台</div>
        <!-- 面包屑导航 -->
        <my-breadcrumb></my-breadcrumb>
            <p class="font-small">{{`管理员:${uname.name}`}}</p>
           <el-button type="warning" class="back-bgc" @click="logout">退出</el-button>
      </el-header>
      <el-container class="p-fixed h100">
        <el-aside>
          <!-- 左侧导航 -->
          <nav-bar></nav-bar>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
body {
  margin: 0;
  padding: 0;
}

.p-relative {
  position: relative;
  height: 100%;
}
.el-header {
  display: flex;
  position: fixed;
  justify-content: space-around;
  align-items: center;
  background-color: #f65026;
  color: #fff;
  line-height: 60px;
  font-size: 32px;
  left: 0;
  right: 0;
}
/* 面包屑导航 */
.el-header .mr-5 {
  margin-right: 700px;
}
.el-header .font-small{
  font-size: 16px;
}
.back-bgc {
  background: #f96037 !important;
}
.p-fixed {
  position: fixed;
  width: 100%;
  margin-top: 60px;
  top: 0;
  bottom: 0;
}
.el-aside {
  width: 20% !important;
  background-color: #f96037;
  color: #333;
  text-align: center;
  line-height: 300px;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
}

.el-main {
  background-color: #f96037;
  border-top: 1px solid #fff;
  color: #333;
  text-align: center;
}
</style>
<script>
import MyBreadcrumb from "../components/index/breadcrumb";
import NavBar from "../components/index/NavBar";
export default {
  data(){
    return {
      uname:{}
    }
  },
  methods:{
    logout(){
      window.sessionStorage.clear();
      this.$router.push("/login");
    }
  },
  components: { MyBreadcrumb, NavBar },
  mounted(){
    this.uname = JSON.parse(window.sessionStorage.getItem("userInfo"));
  }
};
</script>